<ion-header>

  <ion-toolbar>
    <ion-title>Grid</ion-title>
  </ion-toolbar>

</ion-header>


<ion-content class="grid-full">

  <ion-row>
    <ion-col class="cell-1">
      statistics
    </ion-col>
    <ion-col class="cell-2">
      profile
    </ion-col>
    <ion-col class="cell-3">
      photos
    </ion-col>
    <ion-col class="cell-4">
      laboratory
    </ion-col>
    <ion-col class="cell-5">
      calendar
    </ion-col>
    <ion-col class="cell-6">
      alert
    </ion-col>
  </ion-row>

</ion-content>

<style>
  .grid-full ion-row {
    height: 100%;
    padding: 0;
    flex-wrap: wrap;
  }

  .grid-full ion-col {
    flex: 0 0 50%;
    max-width: 50%;
    text-align: center;
    padding: 10px 5px;
  }

  .cell-1 {
    background-color: #C5DCFC;
  }
  .cell-2 {
    background-color: #262B69;
  }
  .cell-3 {
    background-color: #A0C5FA;
  }
  .cell-4 {
    background-color: #B3D0FC;
  }
  .cell-5 {
    background-color: #73A7F9;
  }
  .cell-6 {
    background-color: #8CB9FA;
  }
</style>
